<template>
  <el-form :inline="true" class="search-form">
    <el-form-item label="搜索内容">
      <el-input clearable v-model.trim="searchCond.keyword" placeholder="店铺 菜品名"
        @keyup.enter.native="clickQuery"></el-input>
    </el-form-item>

    <el-form-item label="店铺">
      <el-select v-model="searchCond.storeId" placeholder="店铺" filterable clearable>
        <el-option v-for="item in storeList" :key="item.storeId" :label="item.storeName" :value="item.storeId" />
      </el-select>
    </el-form-item>

    <div class='search-btn-block'>
      <hz-button type="primary" @click="clickQuery">查询</hz-button>
      <hz-button type="primary" @click="clickReset">重置</hz-button>
      <hz-button type="success" @click="clickAdd">新增菜品</hz-button>
    </div>
  </el-form>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
  type: {
    type: String,
    default: "",
  },
  storeList: {type: Array},
});
const emits = defineEmits(["clickQuery", 'clickAdd']);

// 搜素条件
const searchCond = reactive({
  keyword: "",
  storeId: "",
});

/* ---------methods--------- */

// 查询
function clickQuery() {
  emits('clickQuery', { ...searchCond })
}

// 重置
function clickReset() {
  Object.keys(searchCond).forEach(key => {
    searchCond[key] = '';
  })
}

// 新增
function clickAdd() {
  emits('clickAdd')
}

// 获取查询参数
function getSearchCond() {
  return { ...searchCond }
}

// 对外暴露数据
defineExpose({
  getSearchCond: getSearchCond,
  clickQuery: clickQuery,
});
</script>

<style lang="scss" scoped></style>
